<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
    <script>
        Vue.filter("telFun",function(val,sacle="3:4:4",type="m",str="*"){
            var arr=sacle.split(":");
            // console.log(arr);
            // console.log(val);
            if(arr.length!=3){
                return val;
            }
            var reg= new RegExp("^(\\d{"+arr[0]+"})(\\d{"+arr[1]+"})(\\dx{"+arr[2]+"})$")
            var reg= new RegExp("^(\\d{"+arr[0]+"})(\\d{"+arr[1]+"})(\\d{"+arr[2]+"})$")
            var strVal=String(val);
            if(!reg.test(val)){
                return val;
            }
            if(type=="m"){
                return strVal.replace(reg,"$1"+str.repeat(arr[1])+"$3");
            }
            if(type=="e"){
                return strVal.replace(reg,"$1$2"+str.repeat(arr[2]));
            }
            if(type=="s"){
                return strVal.replace(reg,str.repeat(arr[0])+"$2$3");
            }
        })
        Vue.filter(numFun,function(num,scale="6:8:4"){})
    </script>
</head>
<body>
    <div id="app">
        <p>{{ tel | telFun}}</p>
        <p>{{ tel | telFun("3:5:3")}}</p>
        <p>{{ tel | telFun("3:5:3","s")}}</p>
        <p>{{ tel | telFun("5:0:6","s","#")}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                    tel:12345678901,
                    num:220523200001010001
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>